<template>
    <div>
      <el-form :inline="true" size="medium" :model="specficationSearch" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="specficationSearch.specName" placeholder="规格名称"></el-input>
        </el-form-item>
      
        <el-form-item>
          <el-button type="primary" plain @click="search" icon="el-icon-user">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="editSpecfication" icon="el-icon-plus">添加规格</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="specficationList"
          style="width: 100%">
        <el-table-column
            label="ID"
            prop="id"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            label="规格名称"
            align="center"
            prop="specName">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="primary"
                @click="getOption(scope.row)">查看选项</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      {{specfication}}
      <el-form :model="specfication">
        <el-form-item label="规格名称" :label-width="formLabelWidth">
          <el-input v-model="specfication.specName" autocomplete="off"></el-input>
        </el-form-item>
  
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSpecfication">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="规格选项详情" :close-on-click-modal="false" :visible.sync="dialogFormVisible2">
      <el-form :inline="true" size="medium" :model="option" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="option.optionName" placeholder="规格选项名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="option.orders" placeholder="订单量"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="addOption()" icon="el-icon-plus">添加规格选项</el-button>
        </el-form-item>
      </el-form>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="optionName"
        label="选项名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="specId"
        label="所属规格ID">
      </el-table-column>
      <el-table-column
        prop="orders"
        label="订单量">
      </el-table-column>
    </el-table>
    </el-dialog>
    </div>
</template>
<script>
export default {
   name:'',
   data() {
    return {
      specficationList: [],     
      page:1,               // 当前页
      pageSize:5,           // 每页大小
      total:100,            // 总记录数
      searchspecfication:{},     // 要查找的规格信息对象
      specficationSearch: {},    // 代表查询条件对象
      dialogFormVisible:false,  // 控制对话框的显示隐藏
      dialogFormVisible2:false,  // 控制对话框的显示隐藏
      formLabelWidth:'100px',   // 对话框提示文本的宽度
      specfication: {},             //规格对象（添加或修改）
      title: '添加规格',          // 对话框标题
      tableData:[],
      option:{},
      currentId:0
    }
   },
   created(){
    this.$get("/tbspecification/findByPage.do",{page:1,pageSize:5}).then((res)=>{
         this.specficationList = res.rows
    })
      this.$get("/tbspecification/list.do")
      .then(res=>{   
        this.total = res.length
      })
      .catch(err=>{
        console.log(err)
      })
   },
   methods:{
    search(){
      this.$post(`/tbspecification/search.do?page=${this.page}&pageSize=${this.pageSize}`,{spec_name:this.specficationSearch.specName})
      .then((res)=>{
        console.log(res)
         this.specficationList = res.rows
         this.total = res.total
      })
    },
    editSpecfication(){

    },
    getOption(scope){
         this.dialogFormVisible2 = true 
         this.currentId = scope.id
         this.$post(`/tbspecificationOption/search.do?page=1&pageSize=100`,{specId:scope.id})
      .then((res)=>{
        console.log(res)
         this.tableData = res.rows
      })
    },
    addOption(){
        console.log(this.option)
        this.option.specId = parseInt(this.currentId)
        this.option.orders = parseInt(this.option.orders)
      
        this.$post("/tbspecificationOption/save.do",this.option)
       .then(res=>{
        if (res.code === 200){
        this.$message({
          type: 'success',
          message: res.message
        })
        // 关闭对话框
        this.dialogFormVisible2 = false
        this.option = {}
      }else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
       })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search()
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      this.page = val;
      this.search()
    },
    saveSpecfication(){
      this.$post("/tbspecification/save.do",this.specfication)
       .then(res=>{
        if (res.code === 200){
        this.$message({
          type: 'success',
          message: res.message
        })
        // 关闭对话框
        this.dialogFormVisible = false
        // 重新刷新页面
        this.search()
      }else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }
       })
    },
    editSpecfication(){
       this.dialogFormVisible = true
    }


   },
}
</script>
<style lang="scss" scoped>

</style>
